<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html lang="en">
<head>
<jsp:include page="core/templates/header.jsp"></jsp:include>
<script src="custom/js/myJobPage.js"></script>
</head>
<body class="header1 activateAppearAnimation">
	<div id="globalWrapper">
		<jsp:include page="core/templates/mainMenu.jsp"></jsp:include>
		<jsp:include page="core/templates/banner.jsp"></jsp:include>
		<!-- Content -->
		<section id="content"
			style="background: url('core/images/feature.png') repeat;">
			<div class="container">
				<div class="row mt30 mb15">
					<div class="col-md-12">
						<h2>ข้อมูลงานทั้งหมดของคุณ</h2>
					</div>
				</div>
				<div class="row mb30">
					<div class="col-md-9">
						<div class="row">
							<div class="col-md-12 mb15">
								<div class="color0 boxcontent">
									<div class="row">
										<div class="col-md-12">
											<ul class="nav nav-tabs" id="myTab">
												<li class="active"><a href="#successTab"
													data-toggle="tab">งานที่คุณประกาศ <span class="badge"><s:property
																value="model.allMyPostJob" /></span>
												</a></li>
												<li class=""><a href="#taskMyRequestTab"
													data-toggle="tab">งานที่คุณร้องขอ&nbsp;<span
														class="badge"><s:property
																value="model.requestJobRequestStatus.size()+model.requestJobConfirmStatus.size()+model.requestJobRejectStatus.size()" /></span>
												</a></li>
												<li class=""><a href="#taskMyEmploymentTab"
													data-toggle="tab">งานที่คุณถูกว่าจ้างงาน&nbsp;<span
														class="badge"><s:property
																value="model.listBeEmployed.size()" /></span>
												</a></li>
												<li class=""><a href="#pendingTab" data-toggle="tab">งานที่คุณรับมาทำ
														<span class="badge"><s:property
																value="model.allMyRequestJob" /></span>
												</a></li>
											</ul>
											<div class="tab-content">
												<!-- tab 1 -->
												<div class="tab-pane active fade in" id="successTab">
													<s:form action="myJobPage" theme="css_xhtml"
														id="myPostJobform" name="myPostJobform" method="post">
														<s:hidden name="model.pagePostJob.pageCurrentNo"
															id="pagePostJobCurrentNo"></s:hidden>
														<s:hidden name="model.orderByPostJob" id="orderByPostJob"></s:hidden>
														<div class="row mb30">
															<div class="col-md-12">
																<div class="row">
																	<div class="col-md-12 mb05">
																		<div class="text-center">
																			<div class="row textColorBlack">
																				<div class="col-md-4 mb05">แสดงข้อมูลงาน
																					โดยเรียงตามสถานะงาน</div>
																				<div class="col-md-4 mb05">
																					<s:select headerKey="0" headerValue="--- เลือก ---"
																						list="#{'0':'ทั้งหมด','O':'งานที่ยังเปิดประกาศ','C':'งานที่ปิดประกาศแล้ว'}"
																						cssClass="form-control"
																						onchange="orderByConditionMyJobPage(this.value);"
																						value="orderByPostJob" />
																				</div>
																				<div class="col-md-4 mb05">
																					มีงานทั้งหมด
																					<s:property value="model.pagePostJob.listTotalRow" />
																					งาน
																				</div>
																			</div>
																		</div>
																	</div>
																</div>
																<div class="row">
																	<div class="col-md-12">
																		<div class="table-responsive">
																			<table class="table table-striped">
																				<thead class="textColorBlack">
																					<tr>
																						<th><center>ลำดับ</center></th>
																						<th><center>ชื่องาน</center></th>
																						<th><center>เริ่มประกาศ</center></th>
																						<th><center>สิ้นสุดประกาศ</center></th>
																						<th><center>จำนวนผู้ที่สนใจงาน</center></th>
																						<th><center>สถานะงาน</center></th>
																						<th></th>
																					</tr>
																				</thead>
																				<tbody>

																					<s:iterator value="model.listMyPostJob"
																						status="index">
																						<tr>
																							<td><s:property value="#index.count" /></td>
																							<td width="30%"><s:if
																									test="job.jobName.length()>30">
																									<s:property value="job.jobName.substring(0,30)" />...
																					</s:if> <s:else>
																									<s:property value="job.jobName" />
																								</s:else></td>
																							<td align="center"><s:date name="postDate"
																									format="dd MMM yyyy" /></td>
																							<td align="center"><s:date
																									name="endDateOfPost" format="dd MMM yyyy" /></td>
																							<td align="center"><s:property
																									value="amountRequestPost" /> คน</td>

																							<td align="center"><s:if
																									test='statusOfPost.equals("O")'>
																									<i class="font5 icon-ok-circled"
																										style="color: #48D904"></i>&nbsp;เปิด
																					</s:if> <s:else>
																									<i class="font5 icon-cancel-circled"
																										style="color: #FF2921"></i>&nbsp;ปิด</s:else></td>
																							<td>
																								<div align="right">
																									<a
																										href="jobDetail?model.postJobId=<s:property value="postID" />"><button
																											type="button" class="btn btn-success btn-xs">
																											<span class="fontHeader4"><i
																												class="icon-th-list iconSmall"></i>
																												ดูรายละเอียด</span>
																										</button></a>
																								</div>
																							</td>
																						</tr>
																					</s:iterator>
																				</tbody>
																			</table>
																		</div>
																		<s:if
																			test="model.pagePostJob.totalPage!=0 && model.pagePostJob.totalPage!=1">
																			<div class="row">
																				<div class="col-md-12 textCenter">
																					<ul class="pagination">
																						<li><a href="#" onclick="selectMyJobPage(1);">«</a></li>
																						<s:iterator var="counter" begin="1"
																							end="model.pagePostJob.totalPage">
																							<s:if
																								test="model.pagePostJob.pageCurrentNo == #counter">
																								<li class="active"><a href="#"><s:property
																											value="top" /><span class="sr-only">(current)</span></a></li>
																							</s:if>
																							<s:else>
																								<li><a href="#"
																									onclick="selectMyJobPage(<s:property value="top" />);"><s:property
																											value="top" /></a></li>
																							</s:else>
																						</s:iterator>
																						<li><a href="#"
																							onclick="selectMyJobPage(<s:property value="model.pagePostJob.totalPage" />);">»</a></li>
																					</ul>
																				</div>
																			</div>
																		</s:if>
																	</div>
																</div>
															</div>
														</div>
													</s:form>
												</div>

												<!-- tab 2 -->
												<div class="tab-pane fade" id="pendingTab">
													<s:form action="myJobPage" theme="css_xhtml"
														id="myRequestJobform" name="myRequestJobform"
														method="post">
														<s:hidden name="model.pageRequestJob.pageCurrentNo"
															id="pageRequestJobCurrentNo"></s:hidden>
														<s:hidden name="model.orderByRequestJob"
															id="orderByRequestJob"></s:hidden>
														<div class="row">
															<div class="col-md-12 mb05">
																<div class="text-center">
																	<div class="row">
																		<div class="col-md-4 mb05">แสดงข้อมูลงาน
																			โดยรียงตามสถานะงาน</div>
																		<div class="col-md-4 mb05">

																			<s:select headerKey="0" headerValue="--- เลือก ---"
																				list="#{'0':'ทั้งหมด','4':'กำลังทำงาน','5':'รอการประเมินงานจากฟรีแลนซ์'
																						,'6':'เสร็จสมบูรณ์','7':'ยกเลิกการทำงาน'}"
																				cssClass="form-control"
																				onchange="orderByConditionMyRequestJobPage(this.value);"
																				name="orderByRequestJob" />
																		</div>
																		<div class="col-md-4 mb05">
																			มีงานทั้งหมด
																			<s:property value="model.pageRequestJob.listTotalRow" />
																			งาน
																		</div>
																	</div>
																</div>
															</div>
														</div>
														<div class="row">
															<div class="col-md-12">
																<div class="table-responsive">
																	<table class="table table-striped">
																		<thead class="textColorBlack">
																			<tr>
																				<th><center>ลำดับ</center></th>
																				<th><center>ชื่องาน</center></th>
																				<th><center>วันที่ร้องของาน</center></th>
																				<th><center>วันที่ได้รับการอนุมัติ</center></th>
																				<th><center>สถานะงาน</center></th>
																				<th></th>
																			</tr>
																		</thead>
																		<tbody>
																			<s:iterator value="model.listMyRequestJob"
																				status="index">
																				<tr>
																					<td><s:property value="#index.count" /></td>
																					<td width="30%"><s:if
																							test="postJob.job.jobName.length()>30">
																							<s:property
																								value="postJob.job.jobName.substring(0,30)" />...
																					</s:if> <s:else>
																							<s:property value="postJob.job.jobName" />
																						</s:else></td>
																					<td><s:date name="postJob.postDate"
																							format="dd MMM yyyy" /></td>
																					<td><s:date
																							name="listStatusOfRequest[0].dateTime"
																							format="dd MMM yyyy hh:mm น." /></td>
																					<td><s:property
																							value="listStatusOfRequest[0].requestType.requestTypeName" />
																					</td>
																					<td><div align="right">
																							<a
																								href="jobDetail?model.postJobId=<s:property value="postJob.postID" />"><button
																									type="button" class="btn btn-success btn-xs">
																									<span class="fontHeader4"><i
																										class="icon-th-list iconSmall"></i>
																										ดูรายละเอียด</span>
																								</button></a>
																						</div></td>
																				</tr>
																			</s:iterator>
																		</tbody>
																	</table>
																</div>
																<s:if
																	test="model.pageRequestJob.totalPage!=0 && model.pageRequestJob.totalPage!=1">
																	<div class="row">
																		<div class="col-md-12 textCenter">
																			<ul class="pagination">
																				<li><a href="#"
																					onclick="selectMyRequestJobPage(1);">«</a></li>
																				<s:iterator var="counter" begin="1"
																					end="model.pageRequestJob.totalPage">
																					<s:if
																						test="model.pageRequestJob.pageCurrentNo == #counter">
																						<li class="active"><a href="#"><s:property
																									value="top" /><span class="sr-only">(current)</span></a></li>
																					</s:if>
																					<s:else>
																						<li><a href="#"
																							onclick="selectMyRequestJobPage(<s:property value="top" />);"><s:property
																									value="top" /></a></li>
																					</s:else>
																				</s:iterator>
																				<li><a href="#"
																					onclick="selectMyRequestJobPage(<s:property value="model.pageRequestJob.totalPage" />);">»</a></li>
																			</ul>
																		</div>
																	</div>
																</s:if>
															</div>
														</div>
													</s:form>
												</div>

												<!-- tab 3 Request -->
												<div class="tab-pane fade" id="taskMyRequestTab">
													<div class="row">
														<div class="col-md-12 mb05">
															<div class="alert alert-info pb05 pt05">
																<p>
																	<b>ชี้แจง :</b> การแสดงรายละเอียดของงานจะแสดงตารางตาม <b>สถานะการร้องขอ</b>
																	ในปัจจุบัน
																</p>
															</div>
														</div>

														<div class="col-md-12 mb05">
															<h3>
																<span class="label label-info"><b>1. สถานะ</b></span>
																รอการอนุมัติจากผู้ว่าจ้าง
																(ขณะนี้อยู่ในขั้นตอนการพิจารณาจากผู้ว่าจ้าง)
															</h3>
														</div>
														<div class="col-md-12 mb05">
															<s:if test="model.requestJobRequestStatus.size()!=0">
																<div class="table-responsive">
																	<table class="table table-bordered table-hover">
																		<thead class="textColorBlack">
																			<tr>
																				<th style="width: 5px; text-align: center;">ลำดับ</th>
																				<th>ชื่องาน</th>
																				<th style="width: 150px; text-align: center;">วันที่ทำการร้องขอ</th>
																				<th style="width: 150px; text-align: center;">ยกเลิกการร้องขอ</th>
																			</tr>
																		</thead>
																		<tbody>
																			<s:iterator value="model.requestJobRequestStatus"
																				status="index">
																				<tr>
																					<td align="center"><s:property
																							value="#index.count" /></td>
																					<td><a
																						href="jobDetail?model.postJobId=<s:property value="postJob.postID" />"><s:if
																								test="postJob.job.jobName.length()>50">
																								<s:property
																									value="postJob.job.jobName.substring(0,50)" />...
																					</s:if> <s:else>
																								<s:property value="postJob.job.jobName" />
																							</s:else></a></td>
																					<td align="center"><s:date
																							name="listStatusOfRequest[0].dateTime"
																							format="dd MMM yyyy hh:mm น." /></td>
																					<td><div align="center">
																							<button type="button"
																								class="btn btn-warning btn-xs"
																								data-toggle="modal"
																								data-target="#btnCancelRequestJob<s:property value="#index.index"/>">
																								<span class="fontHeader4"><i
																									class="icon-cancel iconSmall"></i>
																									ยกเลิกการร้องของาน</span>
																							</button>
																						</div> <s:include value="modalMyCancelRequestJob.jsp"></s:include>
																					</td>
																				</tr>
																			</s:iterator>
																		</tbody>
																	</table>
																</div>
															</s:if>
															<s:else>
																<div class="alert alert-info pb05 pt05">
																	<p>ไม่พบข้อมูลงานที่ร้องขอของสถานะ 1</p>
																</div>
															</s:else>
														</div>
														<div class="col-md-12 mb05">
															<hr class="lineLines">
														</div>
														<div class="col-md-12 mb05">
															<h3>
																<span class="label label-info"><b>2. สถานะ</b></span>
																ได้รับการอนุมัติจากผู้ว่าจ้าง (กรุณากดปุ่ม <b>"ยืนยัน"</b>
																เพื่อตอบยืนว่าจะทำงานนี้ หรือ กดปุ่ม <b>"ปฏิเสธ"</b>
																เพื่อไม่ทำงานนี้)
															</h3>
														</div>
														<div class="col-md-12">
															<s:if test="model.requestJobConfirmStatus.size()!=0">
																<div class="table-responsive">
																	<table class="table table-bordered table-hover">
																		<thead class="textColorBlack">
																			<tr>
																				<th style="width: 5px; text-align: center;">ลำดับ</th>
																				<th>ชื่องาน</th>
																				<th style="width: 150px; text-align: center;">วันที่ทำการร้องขอ</th>
																				<th style="width: 150px; text-align: center;">วันที่ถูกตอบรับงาน</th>
																				<th style="width: 150px; text-align: center;">ยืนยันการรับงาน</th>
																			</tr>
																		</thead>
																		<tbody>
																			<s:iterator value="model.requestJobConfirmStatus"
																				status="index">
																				<tr>
																					<td align="center"><s:property
																							value="#index.count" /></td>
																					<td><a
																						href="jobDetail?model.postJobId=<s:property value="postJob.postID" />"><s:if
																								test="postJob.job.jobName.length()>30">
																								<s:property
																									value="postJob.job.jobName.substring(0,30)" />...
																					</s:if> <s:else>
																								<s:property value="postJob.job.jobName" />
																							</s:else></a></td>
																					<td><s:date
																							name="listStatusOfRequest[0].dateTime"
																							format="dd MMM yyyy hh:mm น." /></td>
																					<td><s:date
																							name="listStatusOfRequest[0].responseDateTime"
																							format="dd MMM yyyy hh:mm น." /></td>
																					<td>
																						<div align="center">
																							<button type="button"
																								class="btn btn-success btn-xs"
																								data-toggle="modal"
																								data-target="#btnMyConfirm<s:property value="#index.index"/>">
																								<span class="fontHeader4"><i
																									class="icon-ok iconSmall"></i> ยืนยัน</span>
																							</button>
																							<button type="button"
																								class="btn btn-danger btn-xs">
																								<span class="fontHeader4"><i
																									class="icon-ok iconSmall"></i> ปฏิเสธ</span>
																							</button>
																						</div> 
																					</td>
																				</tr>
																				<s:include value="modalMyConfirmRequestJob.jsp"/>
																			</s:iterator>
																		</tbody>
																	</table>
																</div>
															</s:if>
															<s:else>
																<div class="alert alert-info pb05 pt05">
																	<p>ไม่พบข้อมูลงานที่ร้องขอของสถานะ 1</p>
																</div>
															</s:else>

														</div>
														<div class="col-md-12 mb05">
															<hr class="lineLines">
														</div>
														<div class="col-md-12 mb05">
															<h3>
																<span class="label label-info"><b>3. สถานะ</b></span>
																ไม่ได้รับการอนุมัติการร้องขอจากผู้ว่าจ้าง
															</h3>
														</div>
														<div class="col-md-12">

															<s:if test="model.requestJobRejectStatus.size()!=0">
																<div class="table-responsive">
																	<table class="table table-bordered table-hover">
																		<thead class="textColorBlack">
																			<tr>
																				<th style="width: 5px; text-align: center;">ลำดับ</th>
																				<th>ชื่องาน</th>
																				<th style="width: 150px; text-align: center;">วันที่ทำการร้องขอ</th>
																				<th style="width: 150px; text-align: center;">วันที่ตอบกลับ</th>
																				<th style="width: 150px; text-align: center;">ลบการร้องขอ</th>
																			</tr>
																		</thead>
																		<tbody>
																			<s:iterator value="model.requestJobRejectStatus"
																				status="index">
																				<tr>
																					<td align="center"><s:property
																							value="#index.count" /></td>
																					<td><a
																						href="jobDetail?model.postJobId=<s:property value="postJob.postID" />"><s:if
																								test="postJob.job.jobName.length()>30">
																								<s:property
																									value="postJob.job.jobName.substring(0,30)" />...
																					</s:if> <s:else>
																								<s:property value="postJob.job.jobName" />
																							</s:else></a></td>
																					<td><s:date
																							name="listStatusOfRequest[0].dateTime"
																							format="dd MMM yyyy hh:mm น." /></td>
																					<td><s:date
																							name="listStatusOfRequest[0].responseDateTime"
																							format="dd MMM yyyy hh:mm น." /></td>
																					<td align="center"><button type="button"
																							class="btn btn-danger btn-xs">
																							<span class="fontHeader4"><i
																								class="glyphicon glyphicon-trash iconSmall"></i>
																								ลบการร้องขอ</span>
																						</button></td>
																				</tr>
																			</s:iterator>
																		</tbody>
																	</table>
																</div>
															</s:if>
															<s:else>
																<div class="alert alert-info pb05 pt05">
																	<p>ไม่พบข้อมูลงานที่ร้องขอของสถานะ 1</p>
																</div>
															</s:else>
														</div>
													</div>
												</div>

												<!-- tab 4 Employment -->
												<div class="tab-pane fade" id="taskMyEmploymentTab">
													<s:if test="model.listBeEmployed.size()!=0">
														<div class="row">
															<div class="col-md-12">
																<div class="table-responsive">
																	<table class="table table-bordered">
																		<thead class="textColorBlack">
																			<tr>
																				<th style="width: 5px; text-align: center;">ลำดับ</th>
																				<th style="text-align: center;">ชื่องาน</th>
																				<th style="width: 145px; text-align: center;">วันที่ทำการร้องขอ</th>
																				<th style="width: 145px; text-align: center;">ผลการตอบรับงาน</th>
																			</tr>
																		</thead>
																		<tbody>
																			<s:iterator value="model.listBeEmployed" status="i"></s:iterator>
																			<tr>
																				<td align="center"><s:property value="#i.count" /></td>
																				<td><s:property value="postJob.job.jobName" /></td>
																				<td align="center"><s:date
																						name="listStatusOfRequest[0].dateTime"
																						format="dd MMMM yyyy" /></td>
																				<td align="center"><button type="button"
																						class="btn btn-success btn-xs">
																						<span class="fontHeader4"><i
																							class="icon-ok iconSmall"></i> ยืนยัน</span>
																					</button>
																					<button type="button" class="btn btn-danger btn-xs">
																						<span class="fontHeader4"><i
																							class="glyphicon glyphicon-trash iconSmall"></i>
																							ปฏิเสธ</span>
																					</button></td>
																			</tr>
																		</tbody>
																	</table>
																</div>
															</div>
														</div>
													</s:if>
													<s:else>
														<div class="row mt05">
															<div class="col-md-12 col-sm-12 col-xs-12">
																<div class="col-md-12 mt05">
																	<div class="alert alert-success pb05 pt05">
																		<p align="center">
																			<b>*** ไม่พบผู้ที่ร้องของานนี้ ในสถานะกำลังทำงาน
																				***</b>
																		</p>
																	</div>
																</div>
															</div>
														</div>
													</s:else>
												</div>

											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="row mb05">
							<div class="col-md-12">
								<div class="boxFocus color1">
									<div class="textCenter mb05">
										<b>คุณสามารถประกาศงานได้ฟรี</b>
									</div>
									<div class="textCenter">
										<button type="button"
											class="btn btn-labeled btn-success font4">
											<span class="btn-label"><i class="icon-briefcase"></i></span>ประกาศงาน
											ฟรี!
										</button>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 mt15">
								<div class="row">
									<div class="col-md-12">
										<span class="font4"><b>ค้นหางานตามหมวดหมู่งาน</b></span>
									</div>
								</div>
								<div class="row mt05">
									<div class="col-md-12">
										<s:iterator value="model.listCategoryJob">
											<div class="row">
												<div class="col-md-12 col-xs-6 col-sm-6 mt05"
													style="margin-left: 1em;">
													<div class="media">
														<a class="pull-left"
															href="searchJobByCategory?model.searchForm.aptitudeType=%{aptitudeTypeID}"><img
															class="img-circle img-responsive"
															src="<s:property value="image_icon"/>" alt=""
															style="width: 40px;"> </a>
														<div class="media-body">
															<s:a
																href="searchJobByCategory?model.searchForm.aptitudeType=%{aptitudeTypeID}"
																encode="true" method="post">
																<span class="font5"><b><s:property
																			value="aptitudeTypeName" /></b></span>
															</s:a>
															<br> <span class="font5">งานที่มีทั้งหมด <s:property
																	value="countSumJob" /> งาน
															</span>
														</div>
													</div>
												</div>
											</div>
										</s:iterator>
									</div>
								</div>
								<div class="row mt15 mb05">
									<div class="col-md-12">
										<hr class="lineLines">
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<span class="font4 textColorBlack"><b>งานใหม่ล่าสุด</b></span>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<ul class="list-unstyled iconList borderList">
											<s:iterator value="model.listLastJob">
												<li><a
													href="jobDetail?model.postJobId=<s:property value="postID" />"
													class=""> <s:if test="job.jobName.length()>30">
															<s:property value="job.jobName.substring(0,30)" />...
																					</s:if> <s:else>
															<s:property value="job.jobName" />
														</s:else>
												</a></li>
											</s:iterator>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- Content -->
		<jsp:include page="core/templates/footer.jsp" />
	</div>
</body>
</html>